<template>
<!-- 改为复用组件 -->
  <div>
    <p class="header">动态详情</p>
    <div>
      <div class="he">
        <img :src="imgsrc" alt="" class="delimg" />
        <span>name</span>
        <span>浏览量：6000</span>
        <span>点赞：6000</span>
        <span>收藏：6000</span>
        <span>分享数：6000</span>
        <span>下载数：6000</span>
        <el-button type="primary" @click="down">下架</el-button>
      </div>
      <div class="main">
        <video src="" class="video"></video>
        <div class="alt">
          <p>锅包肉的100种做法，第一步----1111111111111111111111111</p>
          <p>时间：2021/01/01</p>
        </div>
        <p class="p1">
          <span>#美食</span>
          <span>#音乐</span>
        </p>
        <!-- <p class="p2">
          <span :class="{ activestyle: isshow1 ==true}" @click="this.ac1"
            >评论(评论数)</span
          >
          <span :class="{ activestyle: isshow2 ==true}" @click="this.ac2"
            >打赏</span
          >
        </p> -->
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="评论(评论数)" name="first">
            <Comment :tableData="tableData"/>
          </el-tab-pane>
          <el-tab-pane label="打赏" name="second">
            <Dasan />
          </el-tab-pane>
        </el-tabs>
        <!-- <div>
     
            <Comment/>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import apis from "../../apis/modules/dynamic";
import Comment from "../../components/Comment .vue";
import Dasan from "../../components/Dashan";
export default {
  components: {
    // HelloWorld,
    Comment,
    Dasan,
  },
  data() {
    return {
      imgsrc:'',
      dyId:'',
        name:"11",
      isshow1: true,
      isshow2: false,
      activeName: "first",
      tableData: [
        {
          username: "1",
          typename: "一级评论",
          content: "上海市普陀区金沙江路 1518 弄",
          topid: "-",
          topcontent: "xxxxxxxx",
          time: "2021/01/01",
          state: "-",
          deltime: "2021/01/01",
          //   operate:"删除"
        },
        {
          username: "2",
          typename: "一级评论",
          content: "上海市普陀区金沙江路 1517 弄",
          topid: "-",
          topcontent: "xxxxxxxx",
          time: "2021/01/01",
          state: "-",
          deltime: "2021/01/01",
          //   operate:"删除"
        },
        {
          username: "3",
          typename: "一级评论",
          content: "上海市普陀区金沙江路 1519 弄",
          topid: "-",
          topcontent: "xxxxxxxx",
          time: "2021/01/01",
          state: "-",
          deltime: "2021/01/01",
          //   operate:"删除"
        },
        {
          username: "4",
          typename: "一级评论",
          content: "上海市普陀区金沙江路 1516 弄",
          topid: "-",
          topcontent: "xxxxxxxx",
          time: "2021/01/01",
          state: "-",
          deltime: "2021/01/01",
          //   operate:"删除"
        },
      ],
    };
  },
  mounted(){
    this.dyId=this.$route.params.dyId
    console.log(this.$route.params.dyId);
    const id={
      dyId: this.dyId
    }
    this.demdeail(id)
  },
  methods: {
    handleClick(tab, event) {
      
      console.log(tab, event);
    },
    // ac1() {
    //   console.log(this.isshow);

    //        this.isshow1=true
    //         this.isshow2=false

    // },
    // ac2(){
    //     this.isshow2=true
    //     this.isshow1=false
    // }
    //下架
    // 
    // 详情
    async demdeail(data){
   
      await apis.DnmDeail(data).then((res) => {
        if (res.code == 200) {
          this.imgsrc=res.data.dyContent
          console.log(res,33);
        }
      });
    },
    down() {
      this.$confirm("是否要将动态下架?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "下架成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消下架",
          });
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.header {
  margin-top: -10px;
}
.he {
  display: flex;
  span {
    margin: 0 20px;
    line-height: 40px;
  }
}
.delimg {
  width: 38px;
  height: 38px;
  border: 1px solid red;
  border-radius: 50%;
}
.el-button--primary {
  width: 140px;
  height: 40px;
  margin-left: 200px;
}
.main {
  padding: 10px 40px 0 40px;
}
.video {
  width: 340px;
  height: 220px;
  border: 1px solid red;
}
.alt {
  display: flex;
  justify-content: space-between;
  p {
    width: 330px;
    height: 20px;
    font-size: 14px;
    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    -o-text-overflow: ellipsis;
  }
}
.p1 {
  span {
    margin-right: 20px;
  }
}
.p2 {
  span {
    margin-right: 20px;
    font-size: 18px;
  }
}
.activestyle {
  border-bottom: 5px solid blue;
}
</style>